<template>
	<div id="App">
		<!-- 主面板 -->
		<el-container>
			<!-- 侧边栏 -->
			<el-aside>
				<div class="logo">
					<el-image src="/logo/logo.png" />
					<span class="text">星火进销存后台</span>
					<div class="my-a">
						<el-icon size="16px" color="#676967">
							<Plus />
						</el-icon>
					</div>
				</div>
				<!-- 菜单栏 -->
				<el-scrollbar :style="`height: calc(100vh - 60px);`">
					<Menu :list="menuList" @onItemClick="onMeunClick"></Menu>
				</el-scrollbar>
			</el-aside>
			<el-container>
				<!-- 页头 -->
				<el-header ref="header">
					<el-row>
						<el-col :span="12">
							<div class="left">
								<div class="my-a">
									<el-icon size="16px" color="#676967">
										<Fold />
									</el-icon>
								</div>
								<div class="my-a">
									<span class="text">
										{{title}}
									</span>
									<el-icon size="16px" color="#676967">
										<ArrowDown />
									</el-icon>
								</div>
							</div>
						</el-col>
						<el-col :span="12">
							<div class="right">
								<el-tooltip effect="light" :hide-after="50" content="联系客服" placement="bottom">
									<div class="my-a">
										<el-badge :value="12" :max="9" is-dot>
											<el-icon size="16px" color="#676967">
												<Headset />
											</el-icon>
										</el-badge>
									</div>
								</el-tooltip>
								<el-tooltip effect="light" :hide-after="50" content="通知" placement="bottom">
									<div class="my-a">
										<el-badge :value="9" :max="9" is-dot>
											<el-icon size="16px" color="#676967">
												<Bell />
											</el-icon>
										</el-badge>
									</div>
								</el-tooltip>
								<el-tooltip effect="light" :hide-after="50" content="问题反馈" placement="bottom">
									<div class="my-a">
										<el-badge>
											<el-icon size="16px" color="#676967">
												<ChatRound />
											</el-icon>
										</el-badge>
									</div>
								</el-tooltip>
								<el-popconfirm title="确定退出登录吗?" @confirm="confirm">
									<template #reference>
										<div class="my-a1">
											<el-badge>
												<el-avatar :size="32" :icon="UserFilled"></el-avatar>
											</el-badge>
										</div>
									</template>
								</el-popconfirm>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<el-scrollbar ref="scrollbarRef" @scroll="mainScroll"
					:style="`width: calc(100wv - 220px);height: calc(100vh - 60px);`">
					<el-main>
						<router-view class="animate__animated animate__lightSpeedInLeft" />
					</el-main>
				</el-scrollbar>
			</el-container>
		</el-container>
		<!--  -->
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { UserFilled, Fold, ArrowDown, Headset, Bell, ChatRound, } from '@element-plus/icons-vue';
	import Menu from './menu/menu.vue';
	import { routes } from '../router';
	import { getMenuList } from '../utils/menuList';
	import cookie from 'js-cookie';
	import { jwtDecode } from 'jwt-decode';
	const header = ref(null);
	const scrollbarRef = ref(null);
	const headerHeight = ref(0);
	const title = ref('');
	//
	//页面挂载
	onMounted(() => {
		headerHeight.value = header.value.clientHeight;
		menuList.value = [...getMenuList()];
		updatePaths(menuList.value, routes);
		// console.log('routes --->', menuList.value);
	});
	//
	const confirm = () => {
		cookie.remove('token');
		location.reload();
	}

	const menuList = ref([]);
	//
	const onMeunClick = ({ text }) => {
		setTimeout(() => {
			title.value = text;
			scrollbarRef.value?.setScrollTop(0);
		}, 1);
	}
	//
	const mainScroll = (e : { scrollTop : number; }) => {
		scrollbarRef.value?.setScrollTop(e.scrollTop);
	}
	const updatePaths = (arr1, arr2) => {
		arr1.forEach(section => {
			section.list.forEach(item => {
				const matchingRoute = arr2.find(route => route.name === item.text);
				if (matchingRoute) {
					item.path = matchingRoute.path;
				}
			});
		});
	}
</script>

<style scoped lang="scss">
	@import '../assets/css/index.scss';

	#App {
		width: 100%;
		height: 100%;

		.el-container {
			width: 100%;
			height: 100%;

			.el-aside {
				width: 220px;
				background-color: #fff;
				border-right: 1px solid rgba(0, 0, 0, .08);
				overflow: hidden;

				.logo {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 60px;
					padding: 0 10px;
					cursor: pointer;

					.el-image {
						width: 32px;
						height: 32px;
						border-radius: 10px;
					}

					.text {
						font-size: 16px;
						color: #333;
						margin-left: 10px;
					}
				}

				.el-scrollbar {
					.el-menu {
						.el-sub-menu {}
					}
				}
			}

			.el-aside:after {
				background-color: rgba(0, 0, 0, .08);
				bottom: 0;
				content: "";
				height: 1px;
				left: 0;
				position: absolute;
				right: 0;
			}

			.el-container {
				.el-header {
					background-color: #fff;
					border-bottom: 1px solid rgba(0, 0, 0, .08);

					.el-row {
						display: flex;
						align-items: center;
						width: 100%;
						height: 100%;

						.el-col {
							.left {
								display: flex;
								align-items: center;
							}

							.right {
								display: flex;
								justify-content: flex-end;
								align-items: center;
							}
						}
					}
				}

				.el-header:after {
					background-color: rgba(0, 0, 0, .08);
					bottom: 0;
					content: "";
					height: 1px;
					left: 0;
					position: absolute;
					right: 0;
				}

				.el-main {
					background-color: #f8f9fa;
					overflow: hidden scroll;
				}
			}
		}
	}
</style>